<template>
  <div class="app-container">
    <el-row :gutter="20">
      <el-col :span="16">
        <div
          class="grid-content bg-purple"
          style="display: flex; align-items: center"
        >
          <span style="font-size: 1.5rem; margin-left: 20px"> 图片展示 </span>
          <el-upload
            class="upload-demo"
            action="https://jsonplaceholder.typicode.com/posts/"
            :on-preview="handlePreview"
            :on-remove="handleRemove"
            :before-remove="beforeRemove"
            multiple
            :limit="3"
            :on-exceed="handleExceed"
            :file-list="fileList"
            :on-progress="uploadFile"
            style="margin: 2px 0 2px 10px"
          >
            <el-button size="small" type="primary">点击上传</el-button>
          </el-upload>
        </div>

        <div class="demo-image__placeholder" v-if="imageUrl.length > 0">
          <div class="block">
            <!-- <span class="demonstration">默认</span> -->
            <el-image :src="imageUrl"></el-image>
          </div>
        </div>
        <!-- 
        <div class="grid-content bg-purple grid-content-img">
          <img style="width: 100%; height: 100%" :src="info.url" alt="" />
        </div> -->
      </el-col>

      <el-col :span="8">
        <div class="grid-content bg-purple grid-content-right">
          <div
            style="background-color: #99a9bf; padding: 10px; border-radius: 5px"
          >
            <span style="font-size: 1rem"> 图片信息：{{ info.content }} </span>
          </div>
        </div></el-col
      >
    </el-row>
  </div>
</template>

<script>
// import { handleUpload, download, recognize } from "../../../api/system/file";
export default {
  name: "Guide",
  data() {
    return {
      info: null,
      file: null,
      fileList: [],
      imageUrl:
        "https://cube.elemecdn.com/6/94/4d3ea53c084bad6931a56d5158a48jpeg.jpeg",
    };
  },
  created() {
    this.info = {
      url: "https://cdn.wujiebantu.com/ai/0986E2C0EFDC19A974E21CCE061BDD79-01.jpg?imageView2/2/w/800/q/75/format/webp",
      content: "有2个人",
    };
  },
  methods: {
    //图片上传时
    uploadFile(event, file, fileList) {
      const fileData = new FormData();
      console.log(file);
      fileData.append("file", file.raw);
      handleUpload(fileData)
        .then((response) => {
          console.log("上传成功");
          // 检查响应的内容类型
          if (
            response.headers["content-type"] &&
            response.headers["content-type"].startsWith("image/")
          ) {
            // 创建Blob对象
            const blob = new Blob([response.data], {
              type: response.headers["content-type"],
            });
            // 创建URL对象
            this.imageUrl = URL.createObjectURL(blob);
            console.log("imageUrl:", this.imageUrl);
            // 更新图片显示
            this.updateImagePreview();
          } else {
            console.warn("响应数据不是图片格式");
          }
        })
        .catch((error) => {
          // console.error("上传失败:", error);
          // 处理错误情况
        });
    },

    //删除列表文件后触发
    handleRemove(file, fileList) {
      console.log("handlePreview", file, fileList);
    },

    //点击文件上传后自动显示的列表
    handlePreview(file) {
      console.log(file);
      recognize();
      download();
    },

    ////删除列表前的提示
    beforeRemove(file, fileList) {
      console.log("beforeRemove", file, fileList);
      return this.$confirm(`确定移除 ${file.name}？`);
    },

    handleExceed(files, fileList) {
      console.log("handleExceed", file, fileList);
      this.$message.warning(
        `当前限制选择 3 个文件，本次选择了 ${files.length} 个文件，共选择了 ${
          files.length + fileList.length
        } 个文件`
      );
    },
  },
};
</script>
<style scoped>
.el-row {
  margin-bottom: 20px;
}
.el-col {
  border-radius: 4px;
}

.bg-purple {
  background: #d3dce6;
}

.grid-content {
  position: relative;
  border-radius: 4px;
  min-height: 36px;
  margin: 10px;
}

.app-container {
  min-height: calc(100vh - 84px);
  color: #303133;
}
.grid-content-img {
  height: calc(100vh - 184px);
  padding: 20px;
}
.grid-content-right {
  min-height: calc(100vh - 137px);
  padding: 20px;
}

:deep() .upload-demo {
  margin: 20px 0 0 500px;
}
</style>
